<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!--
   V-for 指令:
     1.用于展示列表数据
     2.语法:V-for="(item,index)) in xxx" :key="yyy"
     3.可遍历:数组，对象，字符串（用的很少），指定次数
  -->
    <div id="root">
        <!--遍历数组-->
        <!--:key的值在没有ID时绑定索引值-->
        <!--为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key -->
        <ul v-for="(item,index) in lists" :key="id">
            {{index}}{{item}}
        </ul>
        <!--遍历对象-->
        <ul v-for="(item,index) in lists_Two" :key="index">
            {{index}}{{item}}
        </ul>
        <!--遍历字符串-->
        <ul v-for="(item,index) in str" :key="index">
            {{index}}{{item}}
        </ul>
        <!--遍历指定次数-->
        <ul v-for="(item,index) in 5" :key="index">
            <li>索引:{{index}}--每一项:{{item}}</li>
        </ul>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                // lists: [{
                //         id: "0",
                //         name: "魏卫浩",
                //         age: '18'
                //     }, {
                //         id: "1",
                //         name: "邓紫棋",
                //         age: '20'
                //     }, {
                //         id: "2",
                //         name: "周杰伦",
                //         age: '30'
                //     }

                // ],
                lists :[{
                    id : '0',
                    name : '邓紫棋',
                    age : '18'
                },
                 
                ],
                lists_Two: {
                    name: "邓紫棋",
                    age: "18",
                    color: "yellow"
                },
                str: "hello"
            },

        })
    </script>
    <style>

    </style>
</body>

</html>